<template>
	<view>
		<custom-header title="新增商品" />
		<scroll-view
			:scroll-y="true" 
			scroll-with-animation
			:style="{height:'calc(100vh - 128rpx - '+statusBarHeight+'px)'}" 
			class="scroll_content_wrap">
				<view class="form_wrap">
					<view class="name">
						<view class="lable">
							商品名称<text class="required">*</text>
						</view>
						<view class="value">
							骄傲（20支/扎）
						</view>
					</view>
					<view class="upload_img">
						<view class="lable">
							上传图片<text class="required">*</text>
						</view>
						<view class="file_list_wrap">
							<custom-upload v-model="fileList"></custom-upload>
						</view>
					</view>
					<view class="upload_img">
						<view class="lable">
							上传视频
						</view>
						<view class="file_list_wrap">
							<custom-upload v-model="videoList" accept="video" :max-count="1"></custom-upload>
						</view>
					</view>
					<view class="grade">
						<view class="lable">
							选择等级<text class="required">*</text>
						</view>
						<view class="grade_list_wrap">
							<view 
								class="list" 
								:class="{'active':item.id == grade }"
								v-for="(item,index) in gradeList"
								:key="index"
								@click="handleSelectGrade(item)">
									{{ item.name }}
							</view>
						</view>
					</view>
					<view class="rate" v-if="typeId == 'ppmg'">
						<view class="lable">
							<view class="left">
								选择品牌<text class="required">*</text>
							</view>
							<view class="right" @click="isShowSelectBrand = true">
								<view class="text">{{brand || '请选择'}}</view>
								<view class="icon">
									<image src="/static/common/right.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="rate">
						<view class="lable">
							<view class="left">
								评级选项<text class="required">*</text>
							</view>
							<view class="right" @click="handleShowSelectRate">
								<view class="text">请选择</view>
								<view class="icon">
									<image src="/static/common/right.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
						<view class="rate_content_wrap">
							<view class="info1">
								<view class="list">
									<view class="desc">枝长</view>
									<view class="value">未选择</view>
								</view>
								<view class="list">
									<view class="desc">枝粗</view>
									<view class="value">未选择</view>
								</view>
								<view class="list">
									<view class="desc">均匀度</view>
									<view class="value">未选择</view>
								</view>
							</view>
							<view class="info2">
								<view class="list">
									<view class="desc">花头</view>
									<view class="value">未选择</view>
								</view>
								<view class="list">
									<view class="desc">成熟度</view>
									<view class="value">未选择</view>
								</view>
							</view>
							<view class="info3">
								<view class="list">
									<view class="desc">优点</view>
									<view class="value">
										<view class="v_list">未选择</view>
									</view>
								</view>
								<view class="list">
									<view class="desc">瑕疵</view>
									<view class="value">
										<view class="v_list">未选择</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="other_wrap">
						<view class="ow price">
							<view class="lable">
								供货价<text class="required">*</text>
							</view>
							<view class="value" @click="handleShowSetPrice">
								<text class="have" v-if="price">￥{{ price }}</text>
								<text class="no_have" v-else>请输入</text>
							</view>
						</view>
						<view class="ow">
							<view class="lable">
								可售数量<text class="required">*</text>
							</view>
							<view class="value" @click="handleShowAvailable">
								<text class="have" v-if="available">{{ available }}扎</text>
								<text class="no_have" v-else>请输入</text>
							</view>
						</view>
						<view class="ow">
							<view class="lable">
								起订量
							</view>
							<view class="value" @click="handleShowMinimumOrder">
								<text class="have" v-if="minimumOrder">{{ minimumOrder }}</text>
								<text class="no_have" v-else>请输入</text>
							</view>
						</view>
						<view class="ow">
							<view class="lable">
								每人限购数量
							</view>
							<view class="value" @click="handleShowRestrictionNum">
								<text class="have" v-if="restrictionNum">{{ restrictionNum }}</text>
								<text class="no_have" v-else>请输入</text>
							</view>
						</view>
						<view class="ow">
							<view class="lable">
								有效期
							</view>
							<view class="value" @click="isShowValidity = true">
								{{ validity || '请选择' }}
							</view>
						</view>
					</view>
					<view class="describe">
						<view class="lable">商品描述</view>
						<view class="value">
							<up-textarea 
								v-model="describe" 
								placeholder="采摘时间，新鲜程度，来自哪个产区，为什么选择我的这个商品..."
								border="none"
								style="padding:0rpx;"
								placeholderStyle="font-size:24rpx;color:#BBBBBB">
							</up-textarea>
						</view>
					</view>
				</view>
		</scroll-view>
		<view class="footer_btn_wrap">
			<view class="btn_wrap">
				<button
					size="default" 
					type="default" 
					class="btn confirm" 
					hover-class="confirm_hover" 
					:hover-stay-time="200" 
					@click="handleConfirm"
					:disabled="btnLoading"
					:loading="btnLoading">确认</button>
			</view>
		</view>
		<!-- 自定义消息弹出层 -->
		<custom-popup
			:show="isShowToast" 
			:config="popupConfig"
			@confirm="handleMsgConfirm">
		</custom-popup>
		<!-- 供货价 -->
		<up-popup :show="isShowSetPrice" mode="center" :round="10" @open="handleSetPriceOpen">
			<view class="popup_content_wrap stock_content_wrap">
				<view class="title">供货价</view>
				<view class="count_wrap">
					<custom-number-box v-model="price" :step="0.1" disabled type="number" />
				</view>
				<view class="btn_wrap">
					<view 
						class="btn cancel" 
						hover-class="cancel_hover" 
						:hover-stay-time="200" 
						@click="isShowSetPrice = false">取消</view>
					<button 
						size="default" 
						type="default" 
						class="btn confirm" 
						hover-class="confirm_hover" 
						:hover-stay-time="200" 
						@click="handleSetPriceConfirm">确定</button>
				</view>
			</view>
		</up-popup>
		<!-- 可售数量 -->
		<up-popup :show="isShowAvailable" mode="center" :round="10" @open="handleAvailableOpen">
			<view class="popup_content_wrap stock_content_wrap">
				<view class="title">可售数量</view>
				<view class="count_wrap">
					<custom-number-box v-model="available" disabled type="number" />
				</view>
				<view class="btn_wrap">
					<view 
						class="btn cancel" 
						hover-class="cancel_hover" 
						:hover-stay-time="200" 
						@click="isShowAvailable = false">取消</view>
					<button 
						size="default" 
						type="default" 
						class="btn confirm" 
						hover-class="confirm_hover" 
						:hover-stay-time="200" 
						@click="handleAvailableConfirm">确定</button>
				</view>
			</view>
		</up-popup>
		<!-- 起订量 -->
		<up-popup :show="isShowMinimumOrder" mode="center" :round="10" @open="handleMinimumOrderOpen">
			<view class="popup_content_wrap stock_content_wrap">
				<view class="title">起订量</view>
				<view class="count_wrap">
					<custom-number-box v-model="minimumOrder" disabled type="number" />
				</view>
				<view class="all_btn" @click="isShowMinimumOrder = false">设为不限购</view>
				<view class="btn_wrap">
					<view 
						class="btn cancel" 
						hover-class="cancel_hover" 
						:hover-stay-time="200" 
						@click="isShowMinimumOrder = false">取消</view>
					<button 
						size="default" 
						type="default" 
						class="btn confirm" 
						hover-class="confirm_hover" 
						:hover-stay-time="200" 
						@click="handleMinimumOrderConfirm">确定</button>
				</view>
			</view>
		</up-popup>
		<!-- 限购数量 -->
		<up-popup :show="isShowRestrictionNum" mode="center" :round="10" @open="handleRestrictionNumOpen">
			<view class="popup_content_wrap stock_content_wrap">
				<view class="title">限购数量</view>
				<view class="count_wrap">
					<custom-number-box v-model="restrictionNum" disabled type="number" />
				</view>
				<view class="all_btn" @click="isShowRestrictionNum = false">设为不限购</view>
				<view class="btn_wrap">
					<view 
						class="btn cancel" 
						hover-class="cancel_hover" 
						:hover-stay-time="200" 
						@click="isShowRestrictionNum = false">取消</view>
					<button 
						size="default" 
						type="default" 
						class="btn confirm" 
						hover-class="confirm_hover" 
						:hover-stay-time="200" 
						@click="handleRestrictionNumConfirm">确定</button>
				</view>
			</view>
		</up-popup>
		<!-- 有效期 -->
		<custom-select 
			:show="isShowSelectBrand" 
			:datas="brandList" 
			@confirm="handleSelectBrandConfirm"
			@close="isShowSelectBrand = false"></custom-select>
		<!-- 有效期 -->
		<custom-select 
			:show="isShowValidity" 
			:datas="columns" 
			@confirm="handleValidityConfirm"
			@close="isShowValidity = false"></custom-select>
	</view>
</template>

<script setup>
	import { ref,computed,reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	const store = useStore()
	import { objectToQueryString } from '../../utils/util.js'
	
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight
	})
	const typeId = ref(null)
	
	// 消息弹出层
	const isShowToast = ref(false)
	const popupConfig = ref({})
	const handleMsgConfirm = (data)=>{
		isShowToast.value = false
		if(data?.type == 'add'){
			uni.reLaunch({
				url:'/pages/index/index'
			})
		}
	}
	
	// 图片上传
	const fileList = ref([])
	// 视频上传
	const videoList = ref([])
	
	// 选择等级
	const gradeList = ref([
		{ id:1,name:'A级' },
		{ id:2,name:'B级' },
		{ id:3,name:'C级' },
		{ id:4,name:'D级' },
		{ id:5,name:'E级' },
		{ id:6,name:'短枝' },
	])
	const grade = ref(null)
	const handleSelectGrade = (item)=>{
		grade.value = item.id
	}
	// 评级选项
	const rate = ref({a:{id:1,name:'哈哈'},b:2,c:3})
	const handleShowSelectRate = ()=>{
		uni.navigateTo({
			url:`/pages/rateOptions/rateOptions?${objectToQueryString({
				rate:JSON.stringify(rate.value)
			})}`
		})
	}
	
	// 选择品牌
	const brand = ref('')
	const isShowSelectBrand = ref(false)
	const brandList = ref(['品牌1','品牌2','品牌3','品牌4','品牌5'])
	const handleSelectBrandConfirm = (value)=>{
		brand.value = value
	}
	
	// 供货价
	const price = ref(10)
	const isShowSetPrice = ref(false)
	const handleShowSetPrice = ()=>{
		isShowSetPrice.value = true
	}
	const handleSetPriceOpen = ()=>{}
	const handleSetPriceConfirm = ()=>{
		isShowSetPrice.value = false
	}
	// 可售数量
	const available = ref(10)
	const isShowAvailable = ref(false)
	const handleShowAvailable = ()=>{
		isShowAvailable.value = true
	}
	const handleAvailableOpen = ()=>{}
	const handleAvailableConfirm = ()=>{
		isShowAvailable.value = false
	}
	// 起订量
	const minimumOrder = ref(10)
	const isShowMinimumOrder = ref(false)
	const handleShowMinimumOrder = ()=>{
		isShowMinimumOrder.value = true
	}
	const handleMinimumOrderOpen = ()=>{}
	const handleMinimumOrderConfirm = ()=>{
		isShowMinimumOrder.value = false
	}
	// 限购数量
	const restrictionNum = ref(10)
	const isShowRestrictionNum = ref(false)
	const handleShowRestrictionNum = ()=>{
		isShowRestrictionNum.value = true
	}
	const handleRestrictionNumOpen = ()=>{}
	const handleRestrictionNumConfirm = ()=>{
		isShowRestrictionNum.value = false
	}
	// 有效期
	const validity = ref('')
	const isShowValidity = ref(false)
	const columns = ref(['一周','24小时','三天','长期','两周','一个月','三个月'])
	const handleValidityConfirm = (value)=>{
		validity.value = value
	}
	
	
	// 商品描述
	const describe = ref(null)
	
	// 确认
	const btnLoading = ref(false)
	const handleConfirm = ()=>{
		btnLoading.value = true
		setTimeout(()=>{
			btnLoading.value = false
			uni.navigateTo({
				url:'/pages/addGoodsSuccess/addGoodsSuccess?id=123'
			})
			// popupConfig.value = {
			// 	message:'新增成功！',
			// 	data:{
			// 		type:"add"
			// 	}
			// }
			// isShowToast.value = true
		},500)
	}
	
	onLoad((option)=>{
		console.log(option)
		typeId.value = option.typeId
	})
</script>

<style lang="scss">
	.form_wrap{
		padding: 20rpx;
		.lable{
			color: #333333;
			font-size: 28rpx;
			font-weight: bold;
			text.required{
				color: #F70707;
			}
		}
		.name,
		.upload_img,
		.grade,
		.rate,
		.describe{
			border-radius: 10rpx;
			background: #FFFFFF;
			padding: 20rpx;
			margin-bottom: 20rpx;
		}
		.name{
			display: flex;
			.value{
				padding-left: 50rpx;
				color: #333333;
				font-size: 28rpx;
			}
		}
		.upload_img{
			.file_list_wrap{
				padding-top: 20rpx;
			}
		}
		.grade_list_wrap{
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx 0;
			justify-content: space-between;
			.list{
				color: #999999;
				font-size: 24rpx;
				width: 92rpx;
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 8rpx;
				border: 1rpx solid #CCCCCC;
				box-sizing: border-box;
				&.active{
					background: #FCEEF0;
					color: #F5564D;
					border: 2rpx solid #F5564D;
				}
			}
		}
		.rate{
			.lable{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.right{
					display: flex;
					align-items: center;
					.text{
						color: #999999;
						font-size: 24rpx;
						padding-right: 10rpx;
					}
					.icon{
						width: 10rpx;
						height: 20rpx;
						display: flex;
					}
				}
			}
			.rate_content_wrap{
				padding-top: 10rpx;
				.info1,.info2,.info3{
					display: flex;
					.list{
						display: flex;
						font-size: 24rpx;
						min-width: 200rpx;
						padding-top: 20rpx;
						.desc{
							color: #BBBBBB;
						}
						.value{
							color: #666666;
							padding-left: 10rpx;
							.v_list{
								padding-bottom: 10rpx;
							}
						}
					}
				}
			}
		}
		.describe{
			.value{
				padding-top: 20rpx;
			}
		}
		.other_wrap{
			border-radius: 10rpx;
			background: #FFFFFF;
			padding: 0 20rpx;
			margin-bottom: 20rpx;
			.ow{
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;
				border-bottom: 1px solid #F0F0F0;
				&:last-child{
					border-bottom: none;
				}
			}
			.lable,.value{
				flex: 1;
			}
			.value{
				color: #999999;
				font-size: 24rpx;
				display: flex;
				justify-content: flex-end;
			}
			.price{
				.have{
					color: #F5564D;
					font-weight: bold;
				}
			}
		}
	}
	.custom_upload{
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		border: 2rpx solid #CCCCCC;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 42rpx;
			height: 42rpx;
		}
	}
	textarea{
		font-size: 24rpx !important;
	}
	.popup_content_wrap{
		width: 500rpx;
		padding:0 30rpx;
		.title{
			color: #333333;
			font-size: 36rpx;
			text-align: center;
			padding-top: 30rpx;
			font-weight: bold;
		}
		.count_wrap{
			display: flex;
			justify-content: center;
			padding-top: 50rpx;
		}
		.all_btn{
			padding: 50rpx 0 0;
			text-align: center;
			color: #F5564D;
			font-size: 28rpx;
		}
		.btn_wrap{
			display: flex;
			justify-content: center;
			padding: 60rpx 0 50rpx;
			.btn{
				width: 190rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align:  center;
				border-radius: 120rpx;
				font-size: 32rpx;
				padding: 0;
				margin: 0;
			}
			.cancel{
				background: #FFF0F0;
				color: #FE4C20;
				margin-right: 60rpx;
				&.cancel_hover{
					background: #fbdcdc;
				}
			}
			.confirm{
				background: #F5564D;
				color: #FFFFFF;
				&.confirm_hover{
					background: #da4239;
				}
					
			}
		}
		.number-box-input{
			width:180rpx;
			height:65rpx;
			line-height:65rpx;
			margin: 0 10rpx;
			border-radius:4rpx;
			text-align:center;
			font-size:28rpx;
			background:#F1F1F1;
		}
	}
	
	
</style>
